<!DOCTYPE html>
<html lang="en">
  <body>
  <div>
    <div ng-include="headerInclude"></div>   
    <div ng-controller="Apiman.AdminExportImportController" class="page container admin-page" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <div class="col-md-12">
          <div ng-include="'plugins/api-manager/html/admin/admin_bc.include'"></div>
        </div>
      </div>
      <div class="row">
        <!-- Side Navigation -->
        <div class="col-md-3">
          <div ng-include="'plugins/api-manager/html/admin/admin_tabs.include'"></div>
        </div>
        <!-- Admin Content -->
        <div class="col-md-9 admin-content">
          <div class="container-fluid">
            <div class="row">
              <h2 class="title" data-field="heading" apiman-i18n-key="export-import-data">Export/Import Data</h2>
            </div>
            <!-- Helpful hint -->
            <div class="row">
              <div class="col-md-12">
                <p class="apiman-label-faded" apiman-i18n-key="export-import-data-help-text" class="apiman-label-faded">Export all data from the API Manager into an output file, or else use such a file to import data into this installation of the apiman API Manager.</p>
              </div>
              <div class="col-md-12">
                <div class="alert alert-info">
                  <span class="pficon pficon-info"></span>
                  <span apiman-i18n-key="admin-export.warning">Note: when exporting or importing data, it is important that no other changes are made in the API Manager.  If possible, disable user access to the API Manager during this process.</span>
                </div>
              </div>
            </div>
            <!-- HR -->
            <div class="row hr-row">
              <hr/>
            </div>
            
            <div class="row">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title" apiman-i18n-key="export-data">Export Data</h3>
                </div>
                <div class="panel-body">
                  <button ng-show="exportStatus != 'downloading'" ng-click="doExport()" apiman-action-btn="" data-field="exportButton" class="btn btn-primary" apiman-i18n-key="export-all" placeholder="Exporting..." data-icon="fa-cog">Export All</button>
                  <div ng-show="exportButton.state == 'in-progress'" style="margin-top: 20px" ng-show="exportStatus == 'downloading'">
                    <div class="alert alert-info">
                      <span class="pficon pficon-info"></span>
                      <span apiman-i18n-key="admin-export.exporting-info">Once the export has begun, your browser should prompt you to download the exported data file.  Once complete, you will need to refresh this page if you wish to export again.</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title" apiman-i18n-key="import-data">Import Data</h3>
                </div>
                <div class="panel-body">
                  <form class="form-inline">
                    <div ng-show="importStatus == 'none'" class="form-group" style="width: 75%;">
                      <input style="width: 100%; border: 1px solid #ccc;" ng-model="importFile.name" class="form-control" name="file" required>
                    </div>
                    <button ng-show="importStatus == 'none'" ngf-select accept="application/json" class="btn btn-default" ngf-change="selectFile($files)" ngf-multiple="false" apiman-i18n-key="select">Select</button>
                  </form>
                  <button ng-show="importStatus == 'none'" ng-disabled="!importFile" ng-click="doImport(importFile)" class="btn btn-primary" apiman-i18n-key="upload-file" style="margin-top: 10px;">Upload File</button>

                  <div style="float: left; width: 100%;" ng-show="importStatus == 'uploading'">
                    <div class="progress-description">
                      <div class="spinner spinner-xs spinner-inline"></div>
                      <span apiman-i18n-key="uploading-file-msg">Uploading file, please wait...</span>
                    </div>
                    <div class="progress progress-label-top-right">
                      <div class="progress-bar" role="progressbar" aria-valuenow="{{ uploadPercentage }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ uploadPercentage }}%;">
                        <span>{{ uploadPercentage }}%</span>
                      </div>
                    </div>
                  </div>

                  <div style="float: left; width: 100%;" ng-show="importStatus == 'importing'">
                    <div apiman-i18n-key="export.importing-data-msg">Importing data, please wait - this may take some time...</div>
                    <div class="progress">
                      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                        <span class="sr-only"></span>
                      </div>
                    </div>
                  </div>

                  <div style="float: left; width: 100%;" ng-show="importStatus == 'imported'">
                    <span apiman-i18n-key="data-import-completed-msg">Data import completed.  Please check the response below for details:</span>
                    <pre style="width: 100%; max-height: 300px; margin-top: 15px; overflow: auto">{{ importResult }}</pre>
                  </div>

                  <div style="float: left; width: 100%;" ng-show="importStatus == 'error'">
                  </div>
                  
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
  </body>
</html>
